import { _decorator, Button, Node } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { SettingPanel } from '../SettingPanel/SettingPanel';
import { SubgameConfig } from '../../../../scripts/managers/SubgameConfig';
import { instantiate } from 'cc';
import { SubgameButton } from './SubgameButton';
import { EMPTY, of } from 'rxjs';
const { ccclass, property } = _decorator;

@ccclass('LobbyPanel')
export class LobbyPanel extends BasePanel {

    @property(Button)
    settingButton: Button = null;

    @property(Node)
    subgameButtonsContainer: Node = null;

    afterOpen() {
        this.generateSubgameButtons();
        return of('afterOpen');
    }

    useObserves() {
        return [
            BindButton(this.settingButton).subscribe(this.settingButtonClicked.bind(this)),
        ];
    }

    settingButtonClicked() {
        this.log('settingButtonClicked');
        SettingPanel.StartProcess().subscribe(_ => this.log('SettingPanel.result', _));
    }

    generateSubgameButtons() {
        let demoItemNode = this.subgameButtonsContainer.children[0];
        let configs = Object.entries(SubgameConfig).sort((a, b) => a[1].order - b[1].order);
        for (let i = 0; i < configs.length; i++) {
            let config = configs[i];
            let itemNode = instantiate(demoItemNode);
            let sb = itemNode.getComponent(SubgameButton);
            sb.subgameKey.value = config[0];
            itemNode.parent = this.subgameButtonsContainer;
        }
        demoItemNode.destroy();
    }

}

